import { memo } from "react";
import type { FC } from "react";
import { useSetState } from "ahooks";
import { produce } from "immer";
import { Button, Form, Input, Select } from "antd";
import { DeleteOutlined } from "@ant-design/icons";
import { Editor } from "../education/edit";
import styles from "./index.module.scss";
import { skillsOptions } from "@/cvcomponents/common/utils";

const list = [
  {
    name: "Office软件",
    selected: false,
  },
  {
    name: "英语",
  },
  {
    name: "沟通能力",
  },
  {
    name: "口才",
  },
  {
    name: "文案编辑",
  },
  {
    name: "数据分析",
  },
  {
    name: "推广运营",
  },
  {
    name: "产品设计",
  },
  {
    name: "广告设计",
  },
  {
    name: "JavaScript",
  },
  {
    name: "Java",
  },
  {
    name: "Python",
  },
  {
    name: "NodeJs",
  },
];

interface IndexProps {
  displayName: string;
}
function Selection(props: any) {
  const [state, setState] = useSetState<{ skills: any[]; name: string }>({
    skills: list,
    name: "",
  });

  const isSelect = (name: string) => {
    if (!props.value) return false;
    return props.value.findIndex((t: any) => t.name === name) !== -1;
  };
  const remove = (name: string) => {
    props.onChange(props.value.filter((item: any) => item.name !== name));
  };
  const onAdd = () => {
    if (!state.name) return;
    if (
      props.value &&
      props.value?.findIndex((t: any) => t.name === state.name) !== -1
    ) {
      return;
    }
    props.onChange([...(props.value || []), { name: state.name, value: 1 }]);
    setState({ name: "" });
  };
  const choose = (item: any) => {
    if (
      props.value &&
      props.value?.findIndex((t: any) => t.name === item.name) !== -1
    ) {
      return;
    }
    props.onChange([...(props.value || []), { ...item, value: 1 }]);
  };
  return (
    <div>
      <div className={styles.flex}>
        {state.skills.map((item, index) => {
          const selected = isSelect(item.name);
          return (
            <div
              key={item.name}
              className={
                selected
                  ? ` ${styles.flexItem} ${styles.selected}`
                  : `${styles.flexItem}`
              }
              onClick={() => choose(item)}
            >
              {item.name}
            </div>
          );
        })}
      </div>
      <div className={styles.addSkill}>
        <input
          className={styles.input}
          value={state.name}
          onChange={(e) => {
            setState({
              name: e.target.value,
            });
          }}
          placeholder="请输入自定义名称"
        />
        <div
          className={
            state.name ? `${styles.btn}` : `${styles.btn} ${styles.forbid}`
          }
          onClick={onAdd}
        >
          +添加自定义技能特长
        </div>
      </div>
      <div className={styles.selectedItemWraper}>
        {props.value?.map((item: any, index: number) => {
          return (
            <div key={item.name} className={styles.selectedItem}>
              <div
                style={{ margin: "4px 0", width: "100px", fontSize: "15px" }}
              >
                {" "}
                {item.name}:
              </div>
              <Select
                style={{ flex: 1 }}
                value={item.value}
                onChange={(e) => {
                  props.onChange(
                    produce(props.value, (draft: any) => {
                      draft[index].value = e;
                    })
                  );
                }}
                allowClear={false}
                options={skillsOptions}
              ></Select>
              <Button
                icon={<DeleteOutlined style={{ color: "red" }} />}
                onClick={() => remove(item.name)}
              ></Button>
              {/* <div className={styles.removeBtn} onClick={() => remove(item.name)}>
              <svg className={styles.remove} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17"><path stroke="currentColor" strokeLinecap="round" fill='none' strokeLinejoin="round" strokeWidth="1.5" d="M13.38 7.258s-.361 4.49-.571 6.382c-.1.903-.658 1.432-1.572 1.449-1.74.031-3.481.033-5.22-.003-.88-.018-1.428-.554-1.526-1.442-.211-1.908-.571-6.386-.571-6.386M14.302 5.106H2.997M12.124 5.106c-.523 0-.974-.37-1.076-.883l-.162-.81a.853.853 0 00-.825-.633H7.24a.853.853 0 00-.825.632l-.162.811a1.099 1.099 0 01-1.076.883"></path></svg>
            </div> */}
            </div>
          );
        })}
      </div>
    </div>
  );
}
const Index: FC<IndexProps> = ({ displayName }) => {
  return (
    <>
      <div
        style={{
          margin: "10px 10px 20px",
          fontWeight: "bold",
          fontSize: "16px",
        }}
      >
        {displayName}
      </div>
      <Form.Item name={"description"} label="">
        <Editor />
      </Form.Item>
      {/* <Form.Item name={'description'} hidden>
      <Input />
    </Form.Item> */}
      <Form.Item name={"list"}>
        <Selection />
      </Form.Item>
    </>
  );
};

export default memo(Index);
